import React, { PureComponent } from "react";
import NumKey from "./numkey";
import FeatureKey from "./featurekey";

export default class Keyboard extends PureComponent {
    render() {
        return (
            <div style={{backgroundColor:'#F2736E',flex:1,flexDirection:'column',justifyContent:'space-between',display:'flex'}}>
                <div style={{flex:1,flexDirection:'row',justifyContent:'space-between',display:'flex'}}>
                    <FeatureKey 
                        display={"C"} 
                        active={false}
                        featureHandle={this.props.featureHandle}/>
                    <FeatureKey 
                        display={"="} 
                        active={false}
                        featureHandle={this.props.featureHandle}/>
                    <NumKey 
                        display={"0"}
                        inputHandle={this.props.inputHandle}/>
                    <FeatureKey 
                        clicked={this.props.clicked["÷"]}
                        display={"÷"} 
                        active={true}
                        featureHandle={this.props.featureHandle}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"7"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"8"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"9"}
                        inputHandle={this.props.inputHandle}/>
                    <FeatureKey 
                        clicked={this.props.clicked["x"]}
                        display={"x"} 
                        active={true}
                        featureHandle={this.props.featureHandle}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"4"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"5"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"6"}
                        inputHandle={this.props.inputHandle}/>
                    <FeatureKey 
                        clicked={this.props.clicked["-"]}
                        display={"-"} 
                        active={true}
                        featureHandle={this.props.featureHandle}/>
                </div>
                <div style={{flex:1,flexDirection:'row',display:'flex'}}>
                    <NumKey 
                        display={"1"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"2"}
                        inputHandle={this.props.inputHandle}/>
                    <NumKey 
                        display={"3"}
                        inputHandle={this.props.inputHandle}/>
                    <FeatureKey 
                        clicked={this.props.clicked["+"]}
                        display={"+"} 
                        active={true}
                        featureHandle={this.props.featureHandle}/>
                </div>
            </div>
        );
    }
}